<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <view class="Mall4j component-overall-overview">
    <!-- 标题 -->
    <view class="title">
      {{ ['商品整体概况','商品流量','商品转化'][tabIndex] }}
    </view>

    <!-- 选择时间 -->
    <view class="select-hang">
      <view
        class="select-item"
        @tap="openSelectDate(1)"
      >
        <view
          v-if="dateData.dateRange.length"
          class="left-time"
        >
          <text class="left">
            {{ dateData.dateRange[0] }}
          </text>
          <text v-if="dateData.dateRange.length>1">
            -
          </text>
          <text
            v-if="dateData.dateRange.length>1"
            class="right"
          >
            {{ dateData.dateRange[1] }}
          </text>
        </view>
        <view class="right-time">
          {{ dateData.label }}
          <uni-icons
            class="ml-auto"
            type="arrowright"
            color="#999999"
            size="24rpx"
          />
          <!-- <text style="font-size:28rpx">></text> -->
        </view>
      </view>
    </view>

    <!-- tab选项栏 -->
    <view class="tab">
      <view
        :class="['tabItem',tabIndex===0?'tabItem-active':'']"
        @tap="choiceTabindex(0)"
      >
        商品概况
      </view>
      <view
        :class="['tabItem',tabIndex===1?'tabItem-active':'']"
        @tap="choiceTabindex(1)"
      >
        商品流量
      </view>
      <view
        :class="['tabItem',tabIndex===2?'tabItem-active':'']"
        @tap="choiceTabindex(2)"
      >
        商品转化
      </view>
    </view>

    <!-- 选中的时间显示 -->
    <view
      v-if="chocieTimeIndex"
      class="designation-time"
    >
      {{ chocieTime[chocieTimeIndex] }}
    </view>

    <!-- 选中tab展示的数据 -->
    <view class="tab-data-box">
      <view
        v-for="(item, index) in tabData[tabIndex]"
        :key="index"
        class="data-item"
      >
        <view class="name">
          <view class="left-name">
            <view class="name">
              {{ item.name }}
            </view>
            <view class="number">
              {{ item.number }}
            </view>
          </view>
          <view :class="['right-rercentage', item.rercentage > 0 ? '' : 'down-size']">
            <text v-if="item.rercentage > 0">
              +
            </text>{{ item.rercentage !== undefined ? ((item.rercentage * 100).toFixed(2) + '%') : '暂无数据' }}
          </view>
        </view>
        <view class="progress-bar">
          <view
            v-if="item.rercentage<0||!item.rercentage"
            class="percent"
            :class="{'percent-background':false}"
            :style="{width:'0%'}"
          />
          <view
            v-else-if="item.rercentage<1"
            class="percent"
            :class="{'percent-background':false}"
            :style="{width:`${(item.rercentage*100).toFixed(2)}%`}"
          />
          <view
            v-else
            class="percent"
            :class="{'percent-bacmground':false}"
            :style="{width:'100%'}"
          />
        </view>
      </view>
    </view>

    <select-date
      v-if="showSelectDate"
      :value="dateData"
      @cancal="cancal"
      @handle-select-date="handleSelectDate"
    />
  </view>
</template>

<script setup>
import dayjs from 'dayjs'
import customParseFormat from 'dayjs/plugin/customParseFormat'
dayjs.extend(customParseFormat)

const showSelectDate = ref(false) // 时间组件的显隐
const tabIndex = ref(0) // 当前选中的tab栏下标

//  回显
const dateData = reactive({
  value: 1,
  dateRange: ['', ''],
  label: '近7天'
})

const chocieTime = ['', '较前7天', '较前30天', '较前一日', '较前一月']
const chocieTimeIndex = ref(null)
const tabData = reactive([
  [
    {
      title: '商品概况',
      name: '新增商品数',
      checked: false,
      number: 0,
      rercentage: 0,
      progressBar: 0.3023
    },
    {
      title: '商品概况',
      name: '被访问商品',
      checked: false,
      number: 0,
      rercentage: 0,
      progressBar: 0.3023
    },
    {
      title: '商品概况',
      name: '动销商品数',
      checked: false,
      number: 0,
      rercentage: 0,
      progressBar: 0.3023
    }
  ], // 商品概况
  [
    {
      title: '商品流量',
      name: '分享访问数',
      checked: true,
      number: 0,
      rercentage: 0,
      progressBar: 0.3023
    },
    {
      title: '商品流量',
      name: '商品浏览量',
      checked: true,
      number: 0,
      rercentage: 0,
      progressBar: 0.3023
    },
    {
      title: '商品流量',
      name: '商品访问客数',
      checked: true,
      number: 0,
      rercentage: 0,
      progressBar: 0.3023
    }
  ], // 商品流量
  [
    {
      title: '商品转化',
      name: '加购件数',
      checked: false,
      number: 0,
      rercentage: 0,
      progressBar: 0.3023
    },
    {
      title: '商品转化',
      name: '下单件数',
      checked: false,
      number: 0,
      rercentage: 0,
      progressBar: 0.3023
    },
    {
      title: '商品转化',
      name: '支付件数',
      checked: false,
      number: 0,
      rercentage: 0,
      progressBar: 0.3023
    }
  ] // 商品转化
]) // tab切换栏展示的数据

onMounted(() => {
  initDateData()
})

const initDateData = () => {
  const startDay = -7
  const endDay = -1
  const startTime = dayjs()
    .add(startDay, 'days')
    .startOf('days')
    .format('YYYY.MM.DD')
  // 结束时间
  const endTime = dayjs()
    .add(endDay, 'days')
    .endOf('days')
    .format('YYYY.MM.DD')
  dateData.dateRange = [startTime, endTime]
  getProdSurvey()
}

// 显示SelectDate
const openSelectDate = () => {
  showSelectDate.value = true
}
// SelectDate回调
const handleSelectDate = (data) => {
  dateData.dateRange = dateData.dateRange.map(element => {
    if (element.indexOf(' ') !== -1) {
      return element.substring(0, element.indexOf(' '))
    }
    return element
  })
  dateData.label = data.label
  chocieTimeIndex.value = data.value
  dateData.value = data.value
  dateData.dateRange = data.dateRange.map(element => {
    return element.split(' ')[0]
  })
  getProdSurvey()
  showSelectDate.value = false
}
const cancal = () => {
  showSelectDate.value = false
}

// 切换tab
const choiceTabindex = (index) => {
  tabIndex.value = index
}

/**
 * 请求商品整体概况
 */
const getProdSurvey = () => {
  if (dateData.value === 4) {
    dateData.dateRange[0] = dayjs(dateData.dateRange[0], 'YYYY-MM').startOf('day').format('YYYY.MM.DD')
  }
  // 请求参数
  const data = {
    dateType: dateData.value + 1,
    startTime: dayjs(dateData.dateRange[0], 'YYYY.MM.DD').startOf('day').format('YYYY-MM-DD HH:mm:ss')
  }

  switch (dateData.value) {
    case 1:
      data.endTime = dayjs(dateData.dateRange[1], 'YYYY.MM.DD').endOf('day').format('YYYY-MM-DD HH:mm:ss')
      break
    case 2:
      data.endTime = dayjs(dateData.dateRange[1], 'YYYY.MM.DD').endOf('day').format('YYYY-MM-DD HH:mm:ss')
      break
    case 3:
      data.endTime = dayjs(dateData.dateRange[0], 'YYYY.MM.DD').endOf('day').format('YYYY-MM-DD HH:mm:ss')
      break
    case 4:
      data.endTime = dayjs(dateData.dateRange[0], 'YYYY.MM.DD').endOf('month').format('YYYY-MM-DD HH:mm:ss')
      break
  }

  const params = {
    url: '/multishop/prodAnalysis/getProdSurvey',
    method: 'GET',
    data
  }
  http.request(params).then(({ data: res }) => {
    tabData[0][0].number = res.data.newProd
    tabData[0][0].rercentage = res.rate.newProdRate
    tabData[0][1].number = res.data.visitedProd
    tabData[0][1].rercentage = res.rate.visitedProdRate
    tabData[0][2].number = res.data.dynamicSale
    tabData[0][2].rercentage = res.rate.dynamicSaleRate
    tabData[1][0].number = res.data.shareVisit
    tabData[1][0].rercentage = res.rate.shareVisitRate
    tabData[1][1].number = res.data.browse
    tabData[1][1].rercentage = res.rate.browseRate
    tabData[1][2].number = res.data.visitor
    tabData[1][2].rercentage = res.rate.visitorRate
    tabData[2][0].number = res.data.addCart
    tabData[2][0].rercentage = res.rate.addCartRate
    tabData[2][1].number = res.data.orderNum
    tabData[2][1].rercentage = res.rate.orderNumRate
    tabData[2][2].number = res.data.payNum
    tabData[2][2].rercentage = res.rate.payNumRate
  })
}

</script>

<style lang="scss" scoped>
@use "./overall-overview.scss";
</style>
